<template>
  <el-card class="card_item_wrap">
    <div slot="header">
      <h4 class="title_wrap">{{ title }}</h4>
    </div>
    <div>
      <el-row>
        <el-form
          ref="formData"
          :model="formSource"
          :rules="formRules"
          label-width="150px"
          :disabled="$attrs.isFinished"
        >
          <el-col
            :span="12"
            v-for="(item, index) in dataSource"
            :key="item.attributeUuid + index"
          >
            <el-form-item
              v-if="item.attributeUuid !== notShowItem"
              :label="`${item.attributeName}：`"
              :prop="item.formItemType"
            >
              <template v-if="item.attributeType === '01'">
                <el-input
                  class="small_input_wrap"
                  v-model.trim="formSource[item.formItemType]"
                  :placeholder="placeholder"
                  :disabled="item.canEdit === 'N'"
                ></el-input>
              </template>
              <template v-else-if="item.attributeType === '04'">
                <el-select
                  ref="el_multiple_select"
                  v-model="formSource[item.formItemType]"
                  placeholder="请选择"
                  :name="item.formItemType"
                  :disabled="item.canEdit === 'N'"
                  multiple
                  @change="(val) => {
                    handleSelectMultiple({
                      val,
                      item,
                      formData: formSource,
                    });
                  }"
                  @visible-change="(visible) => {
                    handleVisibleChangeByMultiple({
                      visible,
                      item,
                      formData: formSource
                    });
                  }"
                >
                  <el-option
                    v-for="option in item.values"
                    :key="option.valueUuid"
                    :label="option.valueName"
                    :value="option.valueUuid"
                  >
                  </el-option>
                </el-select>
              </template>
              <template v-else>
                <el-select
                  v-model="formSource[item.formItemType]"
                  placeholder="请选择"
                  :disabled="item.canEdit === 'N'"
                  @change="(val) => { handleSelectRadio({ val, item, formData: formSource }); }"
                >
                  <el-option
                    v-for="option in item.values"
                    :key="option.valueUuid"
                    :label="option.valueName"
                    :value="option.valueUuid"
                  >
                  </el-option>
                </el-select>
              </template>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
    </div>
  </el-card>
</template>
<script>
export default {
  props: {
    /* card标题 */
    title: {
      type: String
    },
    /* formItem项集合 */
    infoDataList: {
      type: Array,
      default () {
        return [];
      }
    },
    /* 输入框placeholder */
    placeholder: {
      type: String,
      default: '请输入内容'
    },
    /* 不展示某个formItem的条件，默认为空串 */
    notShowItem: {
      type: String,
      default: ''
    },
    /* 表单数据源 */
    formData: {
      type: Object,
      default () {
        return {};
      }
    },
    /* 表单校验规则 */
    formRules: {
      type: Object,
      default () {
        return {};
      }
    },
  },
  computed: {
    /* formItem项集合，缓存 */
    dataSource () {
      return this.infoDataList;
    },
    /* 表单数据源，缓存 */
    formSource () {
      return this.formData;
    }
  },
  methods: {
    handleVisibleChangeByMultiple (data) {
      this.$emit('handleVisibleChangeByMultiple', data);
    },
    /* 多选下拉框change事件 */
    handleSelectMultiple (data) {
      this.$emit('handleSelectMultiple', data);
    },
    /* 单选下拉框change事件 */
    handleSelectRadio (data) {
      this.$emit('handleSelectRadio', data);
    },
    /* 将card的formData传递给父组件 */
    transferCardItemFormDataFn () {
      const list = _.cloneDeep(this.dataSource);
      list.forEach(item => {
        let valueInfo = this.formSource[item.formItemType];
        if (_.isArray(valueInfo)) {
          valueInfo = valueInfo.join(',');
        }
        item.valueInfo = valueInfo;
      })
      this.$emit('getCardItemFormData', list);
    }
  }
};
</script>
<style lang="less" scoped>
.red_color {
  color: #f56c6c;
}
.el-form-item {
  /deep/ .small_input_wrap {
    width: 50.5%;
  }
  /deep/ .el-select--small {
    width: 50.5%;
  }
}

.title_wrap {
  height: 40px;
  line-height: 40px;
}

.card_item_wrap {
  margin-top: 10px;
}
</style>
